<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <title>Document</title>
    <style>
        table {
            border-collapse: collapse;
        }
        
        th {
            border: 1px solid #000;
            position: relative;
            width: 200px;
        }
        
        .input {
            width: 198px;
        }
        
        td {
            border: 1px solid #000;
        }
    </style>
    <script>
        $(function() {
            var jTbody = $("tbody");
            var jBtnAdd = $(".btn-add");

            jBtnAdd.on("click", function() {
                var name = $(".input-name").val();
                var xingji = $(".input-xingji").val();
                var year = $(".input-year").val();
                var html = "<tr><td>" + name + "</td><td>" + xingji + "</td><td>" + year + "</td><td>" +
                    "<button class='btn-del'>删除</button>" + "</td></tr>";
                var jHtml = $(html);
                jHtml.appendTo(jTbody);
                var btnDels = $(".btn-del");
                btnDels.on("click", function() {
                    var tr = $(this).parents("tr");
                    tr.remove();
                })
                $("td").on("click", function() {
                    var hInput = "<input type='text' class='input'/>";

                    var $Input = $($Input);
                    var td = $(this);
                    td.append(hInput);
                    $(".input").focus();
                    $(".input").on("blur", function(e) {
                        td.text($(".input").val());
                        $(".input").remove();
                    })
                })
            })

        })
    </script>
</head>

<body>
    电影名字:<input type="text" class="input-name" /> 电影的星级:
    <input type="text" class="input-xingji" /> 电影出品年份
    <input type="text" class="input-year" />
    <button class="btn-add">添加</button>
    <table>
        <thead>
            <tr>
                <th>电影名字</th>
                <th>电影的星级</th>
                <th>电影出品年份</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</body>

</html>